<!--eslint-disable-->
<template>
  <van-form validate-first @failed="onFailed">
    <!-- 通过 pattern 进行正则校验 -->
    <van-field
      v-model="value1"
      label="标签1"
      name="pattern"
      placeholder="正则校验"
      :rules="[{ pattern, message: '请输入正确内容' }]"
    />
    <!-- 通过 validator 进行函数校验 -->
    <!-- <van-field
      v-model="value2"
      label="标签2"
      name="validator"
      placeholder="函数校验"
      :rules="[{ validator, message: '请输入正确内容' }]"
    />-->
    <!-- 通过 validator 进行异步函数校验 -->
    <!-- <van-field
      v-model="value3"
      label="标签3"
      name="asyncValidator"
      placeholder="异步函数校验"
      :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
    />-->

    <van-field name="value1" label="fieldfield">
      <template v-slot:input>
        <van-field
          v-model="value1"
          name="pattern"
          placeholder="正则校验"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
      </template>
    </van-field>

    <van-field name="stepper" label="步进器">
      <!-- <template #input> -->
      <template v-slot:input>
        <van-stepper v-model="stepper" />
      </template>
    </van-field>

    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>
<!--eslint-disable-->
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      stepper: "",
      value1: "",
      value2: "",
      value3: "",
      pattern: /\d{6}/,
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading("验证中...");

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
    },
  },
};
</script>
<style scoped>
</style>
